<template>
	<view class="userinfo">
		<!--   案例一 二 -->
		<!-- <image :src="avatar" mode="" class="avatar"></image>
		<view class="username">{{username}}</view>	 -->
		
		<!--   案例三 -->
		<image :src="obj.avatar" mode="" class="avatar"></image>
		<view class="username">{{obj.name}}</view>		
		
		<!-- 案例四 -->
		<!-- <view class="username">{{myName}}</view>		 -->
	</view>
</template>

<script setup>
	// 父传子
import {computed} from "vue"
//  案例一
// const props = defineProps(['username','avatar'])

 // 案例二
// const props = defineProps({
// 	username:{
// 		type:String,
// 		default:"匿名"
// 	},
// 	avatar:{
// 		type:String,
// 		default:"../../static/logo.png"
// 	}
// })

 // 案例三  通用
defineProps({
	obj:{
		type: Object,
		default(){
			return {name:"匿名",avatar:"../../static/logo.png"}
		}
	}
})

// 案例四
// 父传子，单向数据流，不支持修改；可以用 computed 修改；
// const myName = computed(()=>props.username + "xx")

</script>

<style lang="scss" scoped>
.userinfo{
	width: 100%;
	height: 200px;
	background: #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image{
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	.username{
		padding:10px 0;
		font-size: 20px;
	}
}
</style>